{% extends 'base.html' %}

{% block content %}
<div class="container mt-5">
    <h2>管理员面板</h2>

    <div class="row">
        <!-- 用户列表 -->
        <div class="col-md-8">
            <h4>用户列表</h4>
            <table class="table">
                <thead>
                    <tr>
                        <th>UserID</th>
                        <th>Username</th>
                        <th>RoleID</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>{{ user[0] }}</td>
                        <td>{{ user[1] }}</td>
                        <td>{{ user[3] }}</td>
                        <td>
                            <button class="btn btn-primary btn-sm edit-user-btn" data-userid="{{ user[0] }}" data-username="{{ user[1] }}" data-roleid="{{ user[3] }}">编辑</button>
                            <form action="{{ url_for('delete_user_route', user_id=user[0]) }}" method="POST" style="display:inline;">
                                <button type="submit" class="btn btn-danger btn-sm">删除</button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 添加/编辑用户表单 -->
        <div class="col-md-4">
            <h4 id="form-title">添加用户</h4>
            <form method="POST" id="user-form" action="{{ url_for('add_user_route') }}">
                <div class="form-group">
                    <label for="UserID">UserID</label>
                    <input type="text" class="form-control" id="UserID" name="UserID" required>
                </div>
                <div class="form-group">
                    <label for="Username">用户名</label>
                    <input type="text" class="form-control" id="Username" name="Username" required>
                </div>
                <div class="form-group">
                    <label for="Password">密码</label>
                    <input type="password" class="form-control" id="Password" name="Password" required>
                </div>
                <div class="form-group">
                    <label for="RoleID">角色ID</label>
                    <input type="text" class="form-control" id="RoleID" name="RoleID" required>
                </div>
                <button type="submit" class="btn btn-primary">提交</button>
                <button type="reset" class="btn btn-secondary" id="reset-btn">重置</button>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const editButtons = document.querySelectorAll('.edit-user-btn');
    const formTitle = document.getElementById('form-title');
    const userForm = document.getElementById('user-form');
    const resetBtn = document.getElementById('reset-btn');

    editButtons.forEach(button => {
    button.addEventListener('click', function() {
        const userId = this.getAttribute('data-userid');
        const username = this.getAttribute('data-username');
        const roleId = this.getAttribute('data-roleid');
        const password = this.getAttribute('data-password'); // 假设这里从按钮的属性中获取密码

        document.getElementById('UserID').value = userId;
        document.getElementById('Username').value = username;
        document.getElementById('RoleID').value = roleId;
        document.getElementById('Password').value = ''; // 清空密码字段

        // 如果有密码数据，设置到密码输入框中
        if (password) {
            document.getElementById('Password').value = password;
        }

        // 设置密码字段为必填项，因为管理员可能要更新密码
        document.getElementById('Password').required = true;

        // 修改表单标题和提交地址URL
        formTitle.textContent = '编辑用户';
        userForm.action = `/admin/edit_user/${userId}`;
    });
});


    resetBtn.addEventListener('click', function() {
        formTitle.textContent = '添加用户';
        userForm.action = '{{ url_for("add_user_route") }}';
        document.getElementById('Password').required = true;
    });
});
</script>
{% endblock %}
